<template>
  <section>
    <el-row>
      <el-col class="header" :span="21">
        <div class="title">
          <span>修改选项权重</span>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="21">
        <el-table :data="optionsList" border stripe style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <!-- <el-table-column prop="id" label="ID"> </el-table-column> -->
          <el-table-column prop="name" label="选项"> </el-table-column>
          <el-table-column prop="weight" label="权重"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="isShowDialog(scope.row)"
                >修改权重</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 修改权重对话框 -->
    <el-dialog title="修改选项权重" :visible.sync="dialogVisible" width="30%">
      <el-input-number
        v-model="option.weight"
        :min="0"
        :max="100"
      ></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateWeight">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
// 引入请求模块
import { $http } from "../../request/service";
export default {
  name: "",
  data() {
    return {
      optionsList: [],
      // 控制修改对话框的显示
      dialogVisible: false,
      // 保存需要修改的选项对象
      option: {}
    };
  },
  created() {
    this.getOptionList();
  },
  methods: {
    // 修改权重功能
    updateWeight() {
      $http.put(`/option/${this.option.id}`, this.option).then(res => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success("修改成功");
        this.dialogVisible = false;
        this.getOptionList();
      });
    },
    // 控制对话框的显示
    isShowDialog(row) {
      this.dialogVisible = true;
      let obj = JSON.parse(JSON.stringify(row));
      this.option = obj;
    },
    // 获取选项列表
    getOptionList() {
      let arr = [];
      $http.get("/option").then(res => {
        res.data.filter(item => {
          delete item.updateTime;
          delete item.createTime;
          arr.push(item);
          this.optionsList = arr;
        });
      });
    }
  }
};
</script>
<style scoped>
.header {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.el-row {
  padding-top: 10px;
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  text-align: start;
  font-size: 20px;
  font-weight: 700;
  height: 50px;
}
.searchWai {
  padding-left: 260px;
}
</style>
